<template>
	<el-dialog
		title="装载数据表"
		v-model="dialogVisible"
		width="800px"
		:before-close="handleDialogClose"
	>
		<el-form
			:inline="true"
			ref="queryParams"
			:model="queryParams"
			label-width="40px"
		>
			<el-form-item label="表名" class="ma-inline-form-item" prop="name">
				<el-input
					size="small"
					v-model="queryParams.name"
					placeholder="请输入表名"
				></el-input>
			</el-form-item>

			<el-form-item class="ma-inline-form-item">
				<el-button
					size="small"
					type="primary"
					@click="handleSearch"
					icon="el-icon-search"
					>搜索</el-button
				>
				<el-button
					size="small"
					type="default"
					@click="resetSearch"
					icon="el-icon-refresh"
					>重置</el-button
				>
			</el-form-item>
		</el-form>

		<maTable
			ref="table"
			:api="api"
			rowKey="name"
			:hideDo="true"
			@selection-change="selectionChange"
			stripe
			remoteSort
			remoteFilter
		>
			<el-table-column type="selection" width="50"></el-table-column>

			<el-table-column
				label="表名称"
				prop="name"
				width="180"
				:show-overflow-tooltip="true"
			></el-table-column>

			<el-table-column
				prop="comment"
				label="表注释"
				:show-overflow-tooltip="true"
			></el-table-column>

			<el-table-column label="创建时间" prop="created_at" width="160">
				<template #default="scope">
					{{ scope.row.create_time.substr(0, 10) }}
				</template>
			</el-table-column>
		</maTable>

		<template #footer class="dialog-footer">
			<el-button @click="handleDialogClose" size="small">关 闭</el-button>
			<el-button type="primary" @click="loadTable" size="small"
				>确 定</el-button
			>
		</template>
	</el-dialog>
</template>
<script>
export default {
	emits: ["confirm"],

	data() {
		return {
			api: { list: this.$API.dataMaintain.getPageList },
			// 搜索
			queryParams: {
				name: undefined,
			},
			// modal
			dialogVisible: false,
			// 选择的表名
			names: [],
		};
	},

	methods: {
		// 显示表分页
		show() {
			this.dialogVisible = true;
			this.names = [];
		},

		// 装载数据表
		loadTable() {
			this.$API.generate.loadTable({ names: this.names }).then((res) => {
				if (res.success) {
					this.handleDialogClose();
					this.$emit("confirm");
				}
			});
		},

		// 表字段modal关闭
		handleDialogClose() {
			this.dialogVisible = false;
		},

		// 多选
		selectionChange(items) {
			if (items.length > 0) {
				this.names = items.map((item) => {
					return { name: item.name, comment: item.comment };
				});
			} else {
				this.names = [];
			}
		},

		// 搜索
		handleSearch() {
			this.$refs.table.upData(this.queryParams);
		},

		// 重置搜索
		resetSearch() {
			this.$refs.queryParams.resetFields();
			this.handleSearch();
		},
	},
};
</script>
